<template>
	<div>
		<mu-icon-button icon="toc" @click="open('right')" style="float:right" />
		 <mu-refresh-control :refreshing="refreshing" :trigger="trigger" @refresh="refresh"/>
		  <mu-list>
    		<template v-for="item in list">
      		<mu-list-item :title="item"/>
      		<mu-divider/>
    		</template>
  		</mu-list>
  	<mu-infinite-scroll :scroller="scroller" :loading="loading" @load="loadMore"/>
		
		
		
		
		
		<mu-popup position="right" popupClass="demo-popup-right" :open="rightPopup" @close="close('right')">
    	 <mu-text-field hintText="模糊搜索"/>		
    <mu-row gutter>
    	<mu-col width="50" tablet="30" desktop="25">
    		<label>开始时间</label>
    	</mu-col>
    	<mu-col width="50" tablet="30" desktop="25">
    		<mu-date-picker :fullWidth="noFull" v-model="startTime" hintText="开始时间"/>
    	</mu-col>
   	</mu-row>
   	
   	<mu-row gutter>
    	<mu-col width="50" tablet="30" desktop="25">
    		<label>结束时间</label>
    	</mu-col>
    	<mu-col width="50" tablet="30" desktop="25">
    		<mu-date-picker :fullWidth="noFull" v-model="endTime"   hintText="结束时间"/>
    	</mu-col>
   	</mu-row>
   	
    			
    			
				
    			<mu-raised-button label="确定" @click="close('right')" primary fullWidth/>
  	</mu-popup>
	</div>
</template>

<script>
	export default {
  data () {
    return {
      bottomPopup: false,
      topPopup: false,
      leftPopup: false,
      rightPopup: false,
      startTime:null,
	  endTime:null,
	  	noFull:false,
	  	refreshing: false,
      trigger: null,
	  	num: 19,
	  	list:['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19'],
	  	scroller: null,
	  	 loading: false,
    }
  },
  mounted () {
    this.scroller = this.$el
     this.trigger = this.$el
  },
  methods: {
    open (position) {
      this[position + 'Popup'] = true
    },
    close (position) {
      this[position + 'Popup'] = false
    },
     loadMore () {
      this.loading = true
      setTimeout(() => {
        for (let i = this.num; i < this.num + 10; i++) {
          this.list.push('item' + (i + 1))
        }
        this.num += 10
         console.log('我重新请求了')
        this.loading = false
      }, 2000)
    },
        refresh () {
      this.refreshing = true
      setTimeout(() => {
        console.log('我刷新了')
        this.refreshing = false
      }, 2000)
    }
  },
  watch: {
    topPopup (val) {
      if (val) {
        setTimeout(() => {
          this.topPopup = false
        }, 2000)
      }
    }
  }
}
</script>

<style>
	.demo-popup-right {
/*  display: flex;*/
  width: 75%;
  height: 75%;
  max-width: 25rem;
  padding: 24px;
}
</style>